<template>
	<view>
		<u-sticky :offset-top="0" h5NavHeight="0">
			<view class="bg-ff pr10 flex align-center justify-between">
				<u-tabs style="width: 460rpx;" :list="tabs" :bold="false" :is-scroll="false" :current="current"
					@change="tabsChange" active-color="#222" inactive-color="#888" height="88" font-size="24"
					:barStyle="{backgroundColor:'#03C75A',height:'4rpx'}"></u-tabs>

				<view class="select" @click="month_show=true">
					<text class="pr2">{{query.month}}月</text>
					<u-icon color="#999" size="20" name="arrow-down"></u-icon>
				</view>
			</view>
		</u-sticky>

		<template v-for="x in list">
			<u-card :border="false" :title="x.title" sub-title-color="#03C75A" :sub-title="x.status_desc"
				:body-style="{display:'none'}" padding="32">

				<view class="u-flex u-row-between" slot="head">
					<view class="u-card__head--left u-flex">
						<image :src="x.thumb" class="u-card__head--left__thumb" mode="aspectfull"
							:style="{ height: '128rpx', width:'128rpx', borderRadius:  '6rpx' }"></image>

						<view class="ml10 pt2">
							<text class="u-card__head--left__title u-line-2 w200"
								:style="{fontSize: 26 + 'rpx',color: '#222'}">
								{{ x.title }}
							</text>

							<view class="f12px f-85 mt5 w200 pb2">
								<text>商品售价：¥{{x.price}}</text>
								<text class="pl10">数量：{{x.qty}}</text>
							</view>

							<view class="pos-rel f12px f-85 w200" v-if="x.show">
								<view class="u-line-1 pb2" v-if="x.sku_desc">商品规格：{{x.sku_desc}}</view>
								<view class="pb2">下单时间：{{x.create_time}}</view>
								<view class="">订单编号：{{x.order_no}}</view>

								<view class="f-b f12px b0 pos-abs" style="right:-76rpx" @click="x.show=false">
									收起<u-icon name="arrow-up"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="u-card__head--right u-line-1">
						<text class="u-card__head__title__text" :style="{fontSize: '26rpx',color: '#03C75A'}">
							{{ x.status_desc }}
						</text>

						<view class="f-b f12px pt7" @click="x.show=true" v-if="!x.show">
							展开<u-icon name="arrow-down"></u-icon>
						</view>
					</view>
				</view>
				<view class="flex justify-start align-center" slot="foot">
					<text class="f12px f-5 pr2">收益：</text>
					<view class="f-2" :class="{'f-b':x.status==-1}">
						<text class="f12px">¥</text>
						<text class="f16px">{{x.amount}}</text>
					</view>
					<text class="f-b f12px pl5" v-if="x.status==0">确认收货后16天到账</text>
				</view>
			</u-card>
		</template>

		<view class="pt15 pb15">
			<u-empty text="亲，暂无相关数据" v-if="list.length==0 && loading=='nomore'" icon-size="200" font-size="28"
				margin-top="200"></u-empty>

			<u-loadmore v-else :status="loading" />
		</view>
		<u-select :default-value="[Number(query.month)-1]" v-model="month_show" mode="single-column" :list="month_list"
			@confirm="confirm"></u-select>
	</view>
</template>

<script>
	import * as Api from '@/api/assets/income/index.js'
	export default {
		data() {
			return {
				loading: 'loadmore',
				query: {
					year: '',
					month: '',
				},
				page: 0,
				list: [],
				tabs: [{
					type: '',
					name: '全部'
				}, {
					type: 'wait_prize',
					name: '待入账',
					status: 0,
				}, {
					type: 'got_prize',
					name: '已入账',
					status: 2,

				}, {
					type: 'refund',
					name: '退款',
					status: -1,
				}, ],
				current: 0,
				month_show: false,
				month_list: Array.from({
					length: 12
				}, (v, k) => ({
					value: k + 1,
					label: k + 1 + '月'
				}))
			};
		},
		computed: {
			status() { //空=全部，refund=退款，wait_prize=待入账，got_prize=已入账
				return this.tabs[this.current].type;
			},
			month() {
				const {
					year,
					month
				} = this.query;
				return this.$u.date(new Date(year, month - 1, 1), 'yyyymm')
			}
		},
		onLoad(query) {
			if (!query.year) query.year = new Date().getFullYear()
			if (!query.month) query.month = new Date().getMonth() + 1

			this.query = query;
			this.getList();

			uni.setNavigationBarTitle({
				title: query.year + '年推荐奖明细'
			});

			//今年显示最大月份
			if (query.year == new Date().getFullYear()) {
				this.month_list = Array.from({
					length: new Date().getMonth() + 1
				}, (v, k) => ({
					value: k + 1,
					label: k + 1 + '月'
				}))
			}
		},
		methods: {
			tabsChange(index) {
				this.current = index;
				this.loading = 'loadmore';
				this.page = 0;
				this.list = [];
				this.getList();
			},
			confirm(e) {
				this.query.month = e[0]['value'];
				this.loading = 'loadmore';
				this.page = 0;
				this.list = [];
				this.getList();
			},
			async getList() {
				if (this.loading == 'loading' || this.loading == 'nomore') return;
				this.loading = 'loading';
				const res = await Api.recommendOrderList({
					page: ++this.page,
					status: this.status,
					month: this.month,
				});
				if (res.data) {
					const {
						current_page,
						total,
						data
					} = res.data.list || res.data;

					if (data) {
						data.map(item => {
							item.show = false;
						});
						this.page = current_page;
						this.list = this.list.concat(data)
					} else {
						this.list = []
						total = 0;
					}
					// console.log(data);

					setTimeout(() => {
						if (this.list.length >= total) this.loading = 'nomore';
						else this.loading = 'loadmore';
					}, 500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select {
		padding: 0 16rpx;
		line-height: 48rpx;
		border: 1px solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-border-top:after {
		border-color: #f8f8f8 !important;
	}

	.u-flex {
		align-items: flex-start !important;
	}
</style>